<template>
	<view class="login" :style="{height:wh+'px'}">
		<!-- 显示上方的图片 -->
		<view class="title">
			<image src="/static/image/user.png" mode="aspectFit"></image>
			<image src="/static/image/pass.png" mode="aspectFit"></image>
		</view>
		<!-- 下方的表单 -->
		<view class="content">
			<uni-forms ref="logForm" :model="logFormData" :rules="rules" validateTrigger="blur">
				<uni-forms-item name="name"> <!-- 将 name 属性从 username 改为 name -->
					<uni-easyinput v-model="logFormData.name" placeholder="请输入名称" />
					<!-- 修改 v-model 绑定的属性和 placeholder -->
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput type="password" v-model="logFormData.password" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<button class="button" type="primary" @click="login">登录</button>
		</view>
		<!-- 下方的跳转注册 -->
		<view class="register">
			<navigator url="/pages/register/register">还没有账号 ，点击注册</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		userStore
	} from '../../store/userStore.js';
	import {
		CONFIG
	} from '../../utils/config';

	let store = userStore();
	let wh = computed(() => {
		let h = uni.getWindowInfo().windowHeight;
		console.log("h=" + h);
		return h;
	});

	const logFormData = ref({
		name: '', // 将 username 改为 name
		password: ''
	});

	const logForm = ref(null);

	// 验证规则
	const rules = ref({
		name: { // 将 username 改为 name
			rules: [{
				required: true,
				errorMessage: '请输入名称' // 修改错误消息
			}, {
				minLength: 3,
				maxLength: 10,
				errorMessage: '名称必须在{minLength}到{maxLength}个字符之间' // 修改错误消息
			}, {
				pattern: '^\\w{3,10}$',
				errorMessage: '请输入3-10位数字字母和下划线作为名称' // 修改错误消息
			}]
		},
		password: {
			rules: [{
				required: true,
				errorMessage: '请输入密码'
			}, {
				pattern: '^[a-zA-Z0-9._!@#$%^&]{3,10}$',
				errorMessage: '请输入3-10位数字字母和特殊字符密码'
			}]
		}
	});

	// 登录
	function login() {
		logForm.value.validate().then((res) => {
			let params = {
				name: logFormData.value.name, // 将 username 改为 name
				password: logFormData.value.password,
			};
			let et = encodeURI(JSON.stringify(params))
			uni.request({
				url: `${CONFIG.leancloud_url}/1.1/classes/yonghu?where=${et}`,
				method: 'GET',
				success: (response) => {
					console.log(response)
					const res = response.data;
					console.log(res)
					if (res.results.length > 0) {
						uni.showToast({
							title: "登录成功",
							icon: "success"
						});
						let user = res.results[0];
						console.log(user);
						store.addUserInfo(user.name, user.password); // 修改这里
						uni.navigateBack();
					} else {
						uni.showToast({
							title: "用户不存在或密码错误",
							icon: "none"
						});
					}
				},
				fail: (error) => {
					console.error("请求失败", error);
					uni.showToast({
						title: "请求失败",
						icon: "none"
					});
				}
			});
		}).catch(err => {
			console.log("验证失败", err);
		});
	}
</script>
<style scoped>
	.login {
		/* 这里添加边框,页面高度就没问题,如果不添加边框,那么页面内容就多余容器高度,显示滚动条,可以滚动 原因待查，。*/
		border: 1px solid red;
		position: relative;
	}

	/* 图片区域距离上方距离 */
	.login .title {
		margin-top: 100px;

		/* border: 1px solid red; */
	}

	/* 设置图片高度,宽度自适应 */
	.login .title image:nth-child(1) {
		margin-left: 30px;
		height: 50px;
	}

	.login .title image:nth-child(2) {
		margin-left: 30px;
		height: 30px;
	}

	/* 内容区域的外边距 */
	.login .content {
		margin: 10px 20px;
	}

	/* 注册链接样式 */
	.login .register {
		position: absolute;
		bottom: 20px;
		width: 100vw;
		text-align: center;
		color: #007aff;
		font-size: 20rpx;
	}
</style>